import React,{useState} from 'react';
//useState 是react的一个hook; react hook 就是为了丰富 函数式组件的功能
// 想在函数式组件中使用 类似于 类组件的state; 我们需要借助 useState这个hook
// let [变量名，更改变量的函数的名字] = useState('变量对应的初始值')
import ReactDOM from 'react-dom';
/* function App(){
  // let count = 100;

  
  let [count,qqq] = useState(10000)
  let [name,setName] = useState("珠峰")
  function add(){
    console.log("+")
    let t = count + 10;
    qqq(t)// 更新count  并且触发视图更新 { setState({count:t})}
    // console.log(count)    
  }
  function minus(){
    console.log('-')
    let t = count - 10;
    qqq(t)
  }
  // console.log(count,qqq)
  return <div>
    <button onClick={add}>+</button>
    <button onClick={minus}>-</button>
    <h1>{count}</h1>
    <button onClick={()=>{setName("珠峰培训")}}>改名字</button>
    <h2>{name}</h2>
  </div>
}
 */

function App(){
  // let count = 100;
  let [state,setState] = useState({
    count:100,
    name:"珠峰"
  })
  function add(){
    let t = state.count+10;
    let obj = {
      ...state,
      count:t
    }
    setState(obj)
  }
  function minus(){
    let t = state.count-10;
    setState({
      ...state,
      count:t
    })
  }
  function setName(){
    setState({
      ...state,
      name:"珠峰培训"
    })
  }
  return <div>
    <button onClick={add}>+</button>
    <button onClick={minus}>-</button>
    <h1>{state.count}</h1>
    <button onClick={setName}>改名字</button>
    <h2>{state.name}</h2>
  </div>
}
ReactDOM.render(<App/>,document.getElementById('root'))